<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>供应商管理</title>
    <script src="../lib/jquery-1.11.3.js"></script>
    <link
      rel="stylesheet"
      href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css"
    />
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="../css/plant.css" />
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="stylesheet" href="../font/font.css" />
  </head>
  <style>
    #paging div:last-child div:nth-child(2) {
      opacity: 1;
      border-radius: 4px;
      font-size: 14px;
      background: rgba(255, 255, 255, 0.39);
      border: 1px solid #999999;
      color: #999;
    }
    #page span {
      border: none;
      display: inline-block;
      width: 36px;
      height: 36px;
      cursor: pointer;
    }
    .active {
      background: #4dc3b6;

      border-radius: 4px;
      border: none;
      color: #fff;
    }
    #pre,
    #next {
      cursor: pointer;
    }
  </style>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- 这是侧边栏 -->
        <div id="kong" class="col-md-2"></div>
        <div id="main_menu" class="col-md-2">
          <ul id="myul">
            <li id="logoli">
              <div>
                <span class="iconfont icon-shouyefill"></span
                ><a href="../index.html">首页</a>
              </div>
            </li>
            <li id="have">
              <div><span class="iconfont icon-tongji"></span>统计</div>
              <ul>
                <li><a href="../pages/zx_tongji.html">种植收购统计</a></li>
                <li><a href="../pages/saleStatistical.html">销售统计</a></li>
                <li><a href="../pages/dj03.html">人员统计</a></li>
              </ul>
            </li>
            <li>
              <div>
                <span class="iconfont icon-zhongzhiguanli"></span>种植养殖
              </div>
              <ul>
                <li><a href="../pages/plant.html">蔬果</a></li>
                <li><a href="../pages/farming.html">肉类</a></li>
              </ul>
            </li>
            <li>
              <div id="logo">
                <span class="iconfont icon-caigou"></span>采购收购
              </div>
              <ul>
                <li>
                  <a href="../pages/Supplier_management.html">供应商管理</a>
                </li>
                <li><a href="../pages/pick_fruit.html">蔬果</a></li>
                <li><a href="../pages/pick_meat.html">肉类</a></li>
              </ul>
            </li>
            <li>
              <div>
                <span class="iconfont icon-yunshuzhongwuliu-xianxing"></span
                >运输
              </div>
              <ul>
                <li><a href="../pages/tran_meat.html">肉类运输</a></li>
                <li><a href="../pages/tran_ve.html">蔬菜运输</a></li>
              </ul>
            </li>
            <li>
              <div><span class="iconfont icon-xinruku"></span>仓库</div>
              <ul>
                <li><a href="../pages/stockIn.html">入库</a></li>
                <li><a href="../pages/stockOut.html">出库</a></li>
              </ul>
            </li>
            <li>
              <div>
                <span class="iconfont icon-shejishengchan"></span
                ><a href="../pages/production.html">生产</a>
              </div>
            </li>
            <li>
              <div><span class="iconfont icon-xiaoshou"></span>销售</div>
              <ul>
                <li><a href="../pages/zx_xiaoshou.html">销售流通</a></li>
                <li><a href="../pages/online_sho_by.html">网购</a></li>
                <li>
                  <a href="../pages/online_retreate.html">网购-退换记录</a>
                </li>
                <li><a href="../pages/zx_pima.html">批码管理</a></li>
              </ul>
            </li>
            <li>
              <div>
                <span class="iconfont icon-lajitong"></span
                ><a href="../pages/waste_management.html">废料去向</a>
              </div>
            </li>
            <li>
              <div><span class="iconfont icon-guanliyuan"></span>管理</div>
              <ul id="secondary">
                <li><a href="../pages/dj01.html">人员管理</a></li>
                <li><a href="../pages/dj02.html">操作日志</a></li>
                <li><a href="../pages/board.html">留言板</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div id="left_content" class="col-md-10">
          <!-- 这是头 -->
          <nav id="main_headnav">
            <div class="clear">
              <div class="navlefspan">
                <span class="iconfont icon-caidan" id="hidenmenu"></span>
                <span class="mytitle">食品流通安全管理系统</span>
              </div>
              <div class="navrigspan">
                <span class="iconfont icon-tixing" id="tx"></span>
                <!-- 头像 -->
                <img src="../images/shouye/tx.jpg" alt="" />
                <!-- 姓名 -->
                <span id="tc">退出</span>
              </div>
            </div>
            <div>
              <!-- 这里写小的头 -->
            </div>
          </nav>
          <div id="main_content">
            <div id="mycentent">
              <div id="box">
                <div id="main">
                  <p id="mynav">
                    <span>供应商</span>
                    <!-- <span>></span><span class="mycolor2"></span> -->
                  </p>
                  <div id="add">
                    <span>供应商信息</span>
                    <button id="addSupplier">新增</button>
                  </div>
                  <div id="search" class="row">
                    <span>供应商名称</span
                    ><input type="text" placeholder="请输入" id="findName" />
                    <span>状态</span
                    ><select name="" id="findState">
                      <option value="1"></option>
                      <option value="2">供货中</option>
                      <option value="3">暂停供货</option>
                    </select>
                    <!-- <span>出产地</span><input type="text" placeholder="请输入" /> -->
                    <button id="find">查询</button>
                    <button id="reset">重置</button>
                  </div>
                  <table class="table table-bordered" id="mytable">
                    <thead>
                      <tr>
                        <th>供应商名称</th>
                        <th>联系人</th>
                        <th>联系电话</th>
                        <th>地址</th>
                        <th>状态</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody></tbody>
                  </table>
                </div>
                <div id="paging" class="clear">
                  <div>
                    跳至
                    <input type="text" placeholder="5" id="jumpPage" />
                    页
                  </div>
                  <div>
                    <select name="" id="setPage">
                      <option value="10">10条/页</option>
                      <option value="20">20条/页</option>
                      <option value="30">30条/页</option>
                    </select>
                  </div>
                  <div class="clear" id="page"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改 -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">修改</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="s_name">供应商名称</label>
                <input type="text" class="form-control" id="s_name" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">联系人</label>
                <input type="text" class="form-control" id="s_contact" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">联系电话</label>
                <input type="text" class="form-control" id="s_tele" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">地址</label>
                <textarea class="form-control" id="s_address"></textarea>
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">状态</label>
                <select name="" id="s_state">
                  <option value="1">供货中</option>
                  <option value="2">暂停供货</option>
                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              id="confirm"
              class="confirm"
            >
              确定
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加 -->
    <div
      class="modal fade"
      id="myModal1"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">修改</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="s_name">供应商名称</label>
                <input type="text" class="form-control" id="s_name1" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">联系人</label>
                <input type="text" class="form-control" id="s_contact1" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">联系电话</label>
                <input type="text" class="form-control" id="s_tele1" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">地址</label>
                <textarea class="form-control" id="s_address1"></textarea>
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">状态</label>
                <select name="" id="s_state1">
                  <option value="1">供货中</option>
                  <option value="2">暂停供货</option>
                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button type="button" class="btn btn-primary" id="addConfirm">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../js/index.js"></script>
  <script>
    // $("#add button").click(() => {
    //   window.location = "./plant-add.html";
    // });
    window.onload = function () {
      let x = $("#box").width();
      $("#box").width(x);
    };
    let count = 10;
    let page = 1;
    let maxPage;
    let id_val;
    getData();
    // 获取
    function getData() {
      $.ajax({
        url: "/supplier/get",
        data: {
          count: count,
          page: page,
          s_name: $("#findName").val(),
          s_state: $("#findState").find("option:selected").text(),
        },
        success: (res) => {
          if (res.code == 302) {
            location.href = "/";
            return;
          }
          if (res.error) {
            console.log(res.error);
          } else {
            //列表渲染
            $("tbody").html("");
            $(res.searchDate).each((i, v) => {
              $("tbody").append(`
                            <tr data-id="${v.s_id}">
                                <td>${v.s_name}</td>
                                <td>${v.s_contact}</td>
                                <td>${v.s_tele}</td>
                          <td>${v.s_address}</td>
                          <td>${v.s_state}</td>
                                <td>
                                    <a class="edit">修改</a>

                                </td>
                            </tr>
                        `);
            });
            //页码渲染

            $("#page").html(`<div id="pre">
                      <p><</p>
                    </div>
                    <div id="next">
                      <p>></p>
                    </div>`);
            maxPage = Math.ceil(res.total / count);

            for (let i = maxPage; i >= 1; i--) {
              if (page == i) {
                $("#pre").after(`
                <div><span class="active"> ${i}</span></div>

                            `);
              } else {
                $("#pre").after(`
                <div><span> ${i}</span></div>
                 `);
              }
            }
          }
        },
      });
    }
    // 点击页码
    $("#page").on("click", "span", function () {
      page = $(this).text();
      getData();
    });
    // 上一页
    $("#page").on("click", "#pre", function () {
      if (page > 1) {
        page--;
        getData();
      }
    });
    //下一页
    $("#page").on("click", "#next", function () {
      if (page < maxPage) {
        page++;
        getData();
      }
    });
    // 跳转页码

    $("#jumpPage").blur(function () {
      page = $("#jumpPage").val();
      getData();
    });
    // 分页条数设置
    $("#setPage").change(function () {
      let a = parseInt($("#setPage").find("option:selected").text());
      count = a;
      getData();
    });
    //修改

    $("tbody").on("click", ".edit", function () {
      $("#myModal").modal({
        keyboard: false,
      });
      // 打开模态框时填入原数据
      id_val = $(this).parents("tr").attr("data-id");
      let a = $(this).parents("tr").children().eq(0).text();
      let b = $(this).parents("tr").children().eq(1).text();
      let c = $(this).parents("tr").children().eq(2).text();
      let d = $(this).parents("tr").children().eq(3).text();

      $("#s_name").val(a);
      $("#s_contact").val(b);
      $("#s_tele").val(c);
      $("#s_address").val(d);
    });
    // 确认时修改数据
    $("#confirm").click(() => {
      let a = $("#s_name").val();
      let b = $("#s_contact").val();
      let c = $("#s_tele").val();
      let d = $("#s_address").val();
      let e = $("#s_state").find("option:selected").text();

      $("#myModal").modal("hide");
      $.ajax({
        url: "/supplier/edit",
        // method: "post",
        data: {
          id: id_val,
          s_name: a,
          s_contact: b,
          s_tele: c,
          s_address: d,
          s_state: e,
        },
        success: (res) => {
          if (res.error) {
            console.log(res.msg);
          } else {
            alert("修改成功");
            getData();
          }
        },
      });
    });
    //增加
    $("#addSupplier").click(() => {
      $("#myModal1").modal({
        keyboard: false,
      });
    });
    $("#addConfirm").click(() => {
      let a = $("#s_name1").val();
      let b = $("#s_contact1").val();
      let c = $("#s_tele1").val();
      let d = $("#s_address1").val();
      let e = $("#s_state1").find("option:selected").text();

      $("#myModal1").modal("hide");
      $.ajax({
        url: "/supplier/Add",
        method: "post",
        data: {
          s_name: a,
          s_contact: b,
          s_tele: c,
          s_address: d,
          s_state: e,
        },
        success: (res) => {
          // console.log(res);
          alert("修改成功");
          getData();
        },
      });
    });

    //查询
    $("#find").click(() => {
      page = 1;
      count = 10;

      getData();
    });

    //重置
    $("#reset").click(() => {
      page = 1;
      count = 10;
      $("#findName").val("");
      $("#findState option[value='1']").prop("selected", "selected");
      getData();
    });
  </script>
</html>
